<script setup>
import { onMounted, reactive, ref } from 'vue'
import { select } from '../http/user'
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const deluser = ref(false)
const edituser = ref(false)
const form = reactive({
  username: '',
  email: '',
  usertype: '1',
  age: '',
  sex: ''
})

const tableData = ref()

onMounted(async () => {
  const rst = await select()
  tableData.value = rst.data
})

// const submit() {
//
// }

// const handleClose = (done: () => void) => {
//   ElMessageBox.confirm('Are you sure to close this dialog?')
//     .then(() => {
//       done()
//     })
//     .catch(() => {
//       // catch error
//     })
// }
</script>

<template>

  <el-tab-pane class="test">
    <template #label>
      <span class="tab-item">用户管理</span>
    </template>
    <div class="content-container">

      <el-row class="mb-4">
        <el-button type="primary" @click="dialogFormVisible = true" round>添加用户</el-button>
      </el-row>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="email" label="邮箱"  />
        <el-table-column prop="userType" label="用户类型" />
        <el-table-column prop="age" label="年龄" />
        <el-table-column prop="sex" label="性别" />
        <el-table-column fixed="right" label="操作" >
          <template #default>
            <el-button type="primary" @click="edituser = true" round>编辑</el-button>
            <el-button type="danger" @click="deluser = true" round>删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog v-model="dialogFormVisible" title="添加用户">
        <el-form :model="form">
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input v-model="form.username" autocomplete="off" placeholder="请输入用户名"/>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="form.password" autocomplete="off" placeholder="请输入密码"/>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input v-model="form.email" autocomplete="off" placeholder="请输入邮箱"/>
          </el-form-item>
          <el-form-item label="年龄" :label-width="formLabelWidth">
            <el-input v-model="form.age" autocomplete="off" placeholder="请输入年龄"/>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-select v-model="form.sex" placeholder="请选择性别">
              <el-option label="男" value="1" />
              <el-option label="女" value="2" />
              <el-option label="未知" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="用户类型" :label-width="formLabelWidth">
            <el-select v-model="form.usertype" placeholder="请选择用户类型">
              <el-option label="普通用户" value="1" />
              <el-option label="管理员" value="2" />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submit(form)">
          提交
        </el-button>
      </span>
        </template>
      </el-dialog>
    </div>
  </el-tab-pane>

  <el-dialog
    v-model="deluser"
    title="删除用户"
    width="30%"
    :before-close="handleClose"
  >
    <span>确认删除该用户？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="deluser = false">取消</el-button>
        <el-button type="primary" @click="deluser = false">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="edituser" title="修改用户信息">
    <el-form :model="form">
      <el-form-item label="用户名" :label-width="formLabelWidth">
        <el-input v-model="form.username" autocomplete="off" placeholder="请输入用户名"/>
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth">
        <el-input v-model="form.password" autocomplete="off" placeholder="请输入密码"/>
      </el-form-item>
      <el-form-item label="邮箱" :label-width="formLabelWidth">
        <el-input v-model="form.email" autocomplete="off" placeholder="请输入邮箱"/>
      </el-form-item>
      <el-form-item label="年龄" :label-width="formLabelWidth">
        <el-input v-model="form.age" autocomplete="off" placeholder="请输入年龄"/>
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth">
        <el-select v-model="form.sex" placeholder="请选择性别">
          <el-option label="男" value="1" />
          <el-option label="女" value="2" />
          <el-option label="未知" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="用户类型" :label-width="formLabelWidth">
        <el-select v-model="form.usertype" placeholder="请选择用户类型">
          <el-option label="普通用户" value="1" />
          <el-option label="管理员" value="2" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submit(form)">
          修改
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.content-container{
  text-align: left;
  margin-left: 20px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
